<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-10-13 18:30:53
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>用户优惠券列表</span>
            </div>
             <div class="filter-container">
                <el-input v-model="listQuery.title" placeholder="请输入优惠券" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                <el-input v-model="listQuery.nickname" placeholder="请输入用户昵称" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                <el-select v-model.trim="listQuery.cate_id" placeholder="请选择状态" style="margin-right:10px" clearable  class="filter-item" >
                    <el-option @keyup.enter.native="handleFilter" :label="'未使用'" :value="0"></el-option>
                    <el-option @keyup.enter.native="handleFilter" :label="'已使用'" :value="1"></el-option>
                    <el-option @keyup.enter.native="handleFilter" :label="'已过期'" :value="2"></el-option>
                </el-select>
                <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                {{ '搜索' }}
                </el-button>
            </div>
             <el-table
                v-loading="listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  
            <el-table-column  align="center" label="编号" prop="id">
            </el-table-column>
            <el-table-column  align="center" label="用户昵称">
                <template slot-scope="scope">
                    <span>{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="用户头像">
                <template slot-scope="scope">
                     <el-avatar :size="'small'" :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="优惠券名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.coupon_title }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="优惠券面值">
                <template slot-scope="scope">
                    <span>{{ scope.row.coupon_price }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="优惠券最低消费">
                <template slot-scope="scope">
                    <span>{{ scope.row.use_min_price }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="优惠券开始时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.add_time |parseTime}}</span>
                </template>
            </el-table-column>
             <el-table-column  align="center" label="优惠券结束时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.end_time |parseTime }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.status_name }}</span>
                </template>
            </el-table-column>

            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </el-card>
          <el-dialog :title="'领取记录'" :visible.sync="log.dialogVisible" v-if="log.dialogVisible">
              <el-table
                v-loading="log.listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="log.data"
                border
                fit
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  
            <el-table-column  align="center" label="用户昵称">
                 <template slot-scope="scope">
                    <span>{{ scope.row.nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="用户头像">
                 <template slot-scope="scope">
                    <el-image   style="width: 50px; height: 50px" :src="scope.row.avatar" :fit="fit"></el-image>
                </template>
            </el-table-column>
              <el-table-column  align="center" label="领取时间">
                 <template slot-scope="scope">
                    <span>{{ scope.row.add_time |parseTime }}</span>
                </template>
            </el-table-column>
            </el-table>
            <pagination v-show="log.total>0" :total="log.total" :page.sync="log.listQuery.page" :limit.sync="log.listQuery.limit" @pagination="get_log" />
         </el-dialog>
    </div>
</template>

<script>
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { coupon_user} from '@/api/coupon' // api接口
  
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件
    export default{
        name: 'couponIndex',
        components: { Pagination }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
             headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            list: null, // 列表数据
            total: 0, // 总条数
            select_ids : [], // 选中的id集合
            listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
            create: { // 新增
                dialogVisible: false
            },
            log: { // 详情
                listLoading:true,
                dialogVisible: false,
                data: [],
                listQuery: { //列表查询参数
                    page: 1,
                    limit: 10,
                    id : ''
                 },
                total:0
            },
            edit: { // 编辑
                dialogVisible: false,
                id: ''
            }
            }
        },
          created() {
            this.getList()
        },
        methods: {
            handleLog(id){
                this.log.listQuery.id =  id;
                this.log.dialogVisible = true
                this.get_log();
            },
            get_log(){
                this.log.listLoading = true;
                log(this.log.listQuery).then(res=>{
                    this.log.data = res.data.data;
                    this.log.total = res.data.total;
                    this.log.listLoading = false;
                });
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
     
            getList() { // 获取列表
                this.listLoading = true
                coupon_user(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        this.listLoading = false
                    })
                },
            }
    }
</script>

